<template>
	<view class="index content-20 page-bg">
		<view class="empty" v-if="items.length <= 0">
			<u-empty mode='list' text='您还没有添加任何成长记录~'></u-empty>
		</view>
		<view class="news" v-else>
			<view class="news-item" v-for="item in items" :key='item.id' @click="$link('/pagesMine/gorowthDetail?id='+item.id)">
				<image class="news-item__img" :src="item.imgList[0]['imgUrl']" mode=""></image>
				<view class="news-item__info">
					<view class="title icon-del-wrap">
						<text>{{common.stringPartOf(item.title, 15)}}</text>
						<image @click.stop="delItem(item.id)" class="icon-del" src="../static/common/item_27.png" mode=""></image>
					</view>
					<view class="con ">
						{{common.stringPartOf(item.content, 15)}}
					</view>
					<view class="">
						<text class="desc">{{item.creationTime | formatTime}}</text>
					</view>
				</view>
			</view>
			<view class="no-info">{{text}}</view>
		</view>
		<view class="page-submit" @click="$link('/pagesMine/gorowthAdd')">+添加记录</view>
		<view class="footer-block"></view>
		</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				common,
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				text: '暂无相关信息~'
			}
		},
		onLoad() {
			this.pageSize = common.pageSize
			this.getItems()
		},
		methods: {
			getItems() {
				let { pageIndex, pageSize } = this.$data
				api.getMyGrowthRecord({ pageIndex, pageSize },(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 let temp = res.items
					 if(this.pageIndex !== 1) {
					     temp = [...this.items, ...res.items]
					 }
					 this.items = temp
				}) 
			},
			
			delItem(id) {
				this.$showModal('', '您确定要删除该记录吗?', () => {
					api.deleteMyGrowthRecord({ id }, res => {
						this.$showToast('成长记录删除成功~')
						this.pageIndex = 1
						this.items = []
						this.getItems()
					})
				})
			}
		},
		
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.getItems()
			}
		},
	}
</script>

<style scoped lang="scss">
	.icon-del-wrap{
		@include flex-base;
		justify-content: space-between;
		width: 100%;
	}
	.icon-del{
		width: 28upx;
		height: 28upx;
		display: block;
	}
	.news-item{
		@include flex-base;
		margin-bottom: 20upx;
		height: 150upx;
		padding: 10upx;
		padding-right: 0;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10upx;
	}
	.news-item__img{
		width: 200upx;
		min-width: 200upx;
		height: 100%;
		display: block;
		flex-grow: 0;
		border-radius: 10upx;
	}
	.news-item__info{
		overflow: hidden;
		padding-left: 20upx;
		width: 100%;
		padding-right: 20upx;
		box-sizing: border-box;
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
		    height: 100%;
		.title{
			font-size: $font-size-30;
			line-height: 42upx;
			max-height: 86upx;
			overflow: hidden;
		}
	}
	.con{
		color: #666;
		font-size: 26upx;
	}
</style>
